{% extends "common/um_layout.html" %}
{% block content %}
    {% if data %}
        <table class="table table-hover add-wrap" style="text-align:center">
            <thead style="text-align:center">
            <tr>
                <th style="text-align:center">Nickname</th>
                <th style="text-align:center">Loginname</th>
                <th style="text-align:center">Gneder</th>
                <th style="text-align:center">Age</th>
                <th style="text-align:center">Occupation</th>
                <th style="text-align:center">Email</th>
                <th style="text-align:center">status</th>
                <th style="text-align:center">operation</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="text" name="nickname"></td>
                <td>
                    <input type="text" name="login_name">
                </td>
                <td style="width:100px">
                    <input type="text" name="gender" style="width:100px" list="gender-list">
                    <datalist id="gender-list">
                        <option>Male</option>
                        <option>Female</option>
                    </datalist>
                </td>
                <td style="width:50px"><input type="text" style="width:50px" name="age"></td>
                <td>
                    <input type="text" name="occupation" list="occupation-list">
                    <datalist id="occupation-list">
                        <option>Student</option>
                        <option>Teacher</option>
                        <option>Engineer</option>
                        <option>Researcher</option>
                        <option>Doctor</option>
                        <option>Policeman</option>
                        <option>Others</option>
                    </datalist>
                </td>
                <td class="td-status">
                    <input type="text" name="email">
                </td>
                <td class="td-status" style="width:100px">
                    <input type="text" style="width:100px" name="use-power" list="use-list">
                    <datalist id="use-list">
                        <option>using</option>
                        <option>not using</option>
                    </datalist>
                </td>
                <td>
                    <button class="label label-primary do-add">
                        commit
                    </button>
                </td>
            </tr>
            {% for item in data %}
                <tr>
                    <td>{{ item.nickname }}</td>
                    <td>{{ item.login_name }}</td>
                    <td>{{ item.gender }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.occupation }}</td>
                    <td>{{ item.email }}</td>
                    {% if item.status == 0 %}
                        <td class="td-status">
                            <span class="label label-danger">not using</span>
                        </td>
                    {% else %}
                        <td class="td-status">
                            <span class="label label-success">using</span>
                        </td>
                    {% endif %}
                    <td>
                        <a href="{{ buildUrl('userManager/modify') }}">
                            <span class="label label-primary">modify</span>
                        </a>
                        <a href="{{ buildUrl('userManager/delete')~'?id='~item.id }}">
                            <span class="label label-danger">delete</span>
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
    {% include "common/pagenation.html" %}
{% endblock %}
{% block js %}
    <script src="{{ buildStaticUrl("/js/user_manager/adduser.js") }}"></script>
{% endblock %}